Forms

Forms are used to handle user input in the Angular application. Forms can have multiple DOM elements like input, checkboxes, dropdowns, e.t.c. so that users can have a better interaction with the application. The main motive of the application should be to make user interaction smooth.

There are two types of forms in the Angular application. Let's discuss them separately.

Template Driven Forms

Here are some of the characteristics of template-driven forms that will eventually help understand their definition.

• Template-driven forms are created using directives in the template.
• It needs FormsModule to be imported into AppModule.
• This can become confusing for larger forms as it would contain a lot of directives.
• Mostly ngModel keeps the data synced between component and template.
• Need to create custom directives.
• The "source of truth" is always the template.
• The validations are created using attributes on input elements.
• Angular creates a control for each element, given that we have set up a name attribute and ngModel binding for each input.

Create Template-driven forms

1. Create a form and provide a reference variable.

<form #UserForm="ngForm" novalidate (ngSubmit)="submit()">  </form>

2. Add an input tag along with some validations.

<div>
   <label for="User name">
      <input 
          type="text" 
          name="user name" 
          placeholder="user name" 
          #username="ngModel"
          required
          [(ngModel)]="user.name">
    </label>
</div>

3. Inside the component, create a variable and fetch values of forms.

export class TemplateFormExampleComponent {
      user = {
          username: ' '
      };

      /**
      * Handle form submit
      */
      submit(){
          console.log('form is submitted');     
      }
}

Reactive Forms

Here are some of the characteristics of reactive forms that will eventually help understand their definition.

• Reactive forms are created programmatically at the component level.
• It needs ReactiveFormsModule to be imported into AppModule.
• This is easier to understand and implement.
• All business validations are in the component class.
• No need for custom directives. Write basic functions.
• Reactive Forms create a better separation between business logic and presentation logic.
• Control is created in the component class with new FormControl().
• Here, ngModel use is not necessary.

Create Reactive forms

1. Inside the HTML file, add the form.

<form [formGroup]="user" (ngSubmit)="submit(user.value)">
      <div formGroupName="name">
              <label>
                  <input 
                      type="text"
                      placeholder="user name"
                      formControlName="username"/>
              </label>                    
          </div>

      ...
  </form>

2. Add FormGroup in our ts file and fetch variables from forms.

user:FormGroup;

ngOnInit(){
     this.user = new FormGroup({
          username: new FormControl(""),
     });
}